<template>
	<app-color-animate-text :texts="flag ? value1 : value2"></app-color-animate-text>
	<button @click="change()">变换</button>
	<div>
		当前：{{ flag ? value1.toString() : value2.toString() }}
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AppColorAnimateText from "@/color-animate-text/color-animate-text.component.vue";

export default defineComponent({
	name: 'app-root',
	components: {
		AppColorAnimateText,
	},
	data() {
		return {
			flag: true,
			value1: ['CrimsonHu', '全栈工程师', '谁会拒绝一个有意思的文字动效呢'],
			value2: ['我的技术栈', 'Angular+Vue+React+Java'],
		}
	},
	methods: {
		change(): void {
			this.flag = !this.flag;
		}
	}
});
</script>
